<template>
  <div class="content-wrap">
    <div class="header">
      <el-button-group>
        <el-button size="small" icon="el-icon-back" @click="goBack">
          返回上一页
        </el-button>
        <el-dropdown @command="addNewT">
          <el-button type="success" size="small">
            <i class="el-icon-plus el-icon--right"></i>
            添加题目
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="radio">单选题</el-dropdown-item>
            <el-dropdown-item command="mult">多选题</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" size="small" @click="submitTs">
          <i class="el-icon-upload"></i>
          更新题目
        </el-button>
      </el-button-group>
    </div>

    <div v-if="t_list.length > 0">
      <el-form
        class="ts"
        v-for="form in t_list"
        :key="form.t_id"
        label-width="70px"
      >
        <el-form-item label="题目" prop="title">
          <el-input
            v-model="form.title"
            type="textarea"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="题目类型" prop="type">
          <el-select v-model="form.type" @change="changeType(form.t_id)">
            <el-option label="单选题" value="radio"></el-option>
            <el-option label="多选题" value="mult"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="A" prop="A">
          <el-input v-model="form.A" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="B" prop="B">
          <el-input v-model="form.B" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="C" prop="C">
          <el-input v-model="form.C" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="D" prop="D">
          <el-input v-model="form.D" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="答案">
          <div v-if="form.type == 'mult'">
            <el-checkbox-group v-model="form.answer" @change="change_answer">
              <el-checkbox label="A"></el-checkbox>
              <el-checkbox label="B"></el-checkbox>
              <el-checkbox label="C"></el-checkbox>
              <el-checkbox label="D"></el-checkbox>
            </el-checkbox-group>
          </div>
          <div v-else>
            <el-radio-group v-model="form.answer">
              <el-radio label="A"></el-radio>
              <el-radio label="B"></el-radio>
              <el-radio label="C"></el-radio>
              <el-radio label="D"></el-radio>
            </el-radio-group>
          </div>
          <el-button
            type="danger"
            class="DelBtn"
            icon="el-icon-delete"
            @click="deleteTs(form.t_id)"
          >
            删除题目
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <el-empty description="暂无题目"></el-empty>
    </div>
  </div>
</template>

<script>
import request from "api";
export default {
  name: "editTK",
  mounted() {
    this.tk_id = this.$route.params["tk_id"];
    this.getTs(this.$route.params["tk_id"]);
  },
  data() {
    return {
      tk_id: null,
      t_list: [],
      del_list: [],
    };
  },
  methods: {
    change_answer() {
      console.log(this.t_list);
    },
    addNewT(type) {
      let t = {
        A: "",
        B: "",
        C: "",
        D: "",
        t_id: "new",
        title: "",
        answer: [],
        type,
      };
      t.t_id = "new" + this.t_list.length;
      this.t_list.push(t);
    },
    goBack() {
      this.$router.go(-1);
    },
    changeType(tid) {
      this.t_list.forEach((item) => {
        if (item.t_id == tid) {
          if (typeof item.answer == "string") {
            item.answer = item.answer.split("");
          } else {
            if (item.answer != "") {
              item.answer = item.answer[0];
            } else {
              item.answer = [];
            }
          }
        }
      });
    },
    submitTs() {
      let that = this;

      let t_list = JSON.parse(JSON.stringify(that.t_list));

      t_list.map((t) => {
        if (t.type == "mult") {
          t.answer = t.answer.sort();
        }
      });

      let new_list = [];
      let del_list = [];

      that.del_list.forEach((item) => {
        del_list.push(item.t_id);
      });

      let new_index = [];

      t_list.forEach((item) => {
        if (item.type == "mult") {
          item.answer = item.answer.join("");
        }
        if (item.t_id.indexOf("new") != -1) {
          new_list.push(item);
          new_index.push(t_list.indexOf(item));
        }
      });

      new_index.forEach((item) => {
        t_list.splice(item, 1);
      });
      request({
        method: "post",
        url: "TK/EditTs.php",
        data: {
          ts: t_list,
          newTs: new_list,
          tk_id: that.tk_id,
          del_list,
        },
      }).then((res) => {
        if (res.state == "success") {
          this.$message({ message: "更新成功", type: "success" });
        } else {
          this.$message({ message: "更新失败", type: "error" });
        }
        this.getTs(that.tk_id);
      });
    },
    deleteTs(tid) {
      let that = this;
      this.t_list.forEach((item) => {
        if (item.t_id == tid) {
          that.del_list.push(item);
          that.t_list.splice(that.t_list.indexOf(item), 1);
        }
      });
    },
    getTs(id) {
      let that = this;
      request({
        method: "get",
        url: "TK/getTs.php?tk_id=" + id,
      }).then((res) => {
        this.t_list = res.data;
      });
      this.axios.get("TK/getTs.php?tk_id=" + id).then((res) => {
        that.t_list = res.data.data;
      });
    },
  },
};
</script>

<style scoped>
.DelBtn {
  position: absolute;
  right: 0;
  bottom: 10px;
}
.ts {
  margin: 10px auto;
  width: 80%;
  padding: 20px;
  border: 1px solid rgb(206, 206, 206);
  border-radius: 10px;
}
.header {
  position: sticky;
  top: 0;
  right: 0;
  z-index: 100;
}
.t_edit_tools {
  position: sticky;
  top: 0;
  right: 0;
  float: right;
  z-index: 10;
}
</style>